<template>
  <u-tabbar
      :placeholder="true"
      :value="value1"
      activeColor="#1296db"
      v-if="isShow"
      @change="name => value1 = name"
      :safeAreaInsetBottom="false"
      :customStyle="{height: '83px', zIndex: '1000', backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%', ...styles}"

  >
    <u-tabbar-item v-for="(item,index) in data" :key="item.index" :name="item.id" :text="item.title" @click="changeUrl">
      <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          :src="item.activeImg"
      ></image>
      <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          :src="item.img"
      ></image>
    </u-tabbar-item>

  </u-tabbar>
</template>
<script>

export default {
  name: "index",
  data(){
    return{
      value1: 1,
      isShow:false,
      config: {
        "height": "146rpx",
        "backgroundColor": "rgb(255, 255, 255)",  
        "color": "#777777",
        "activeColor": "#333333",
        "boxShadow": "none",
        "border": 0,
		 // "boxShadow": "0 -4px 8px rgba(0, 0, 0, 0.1)"
      },
      data:[
        {
          id:1,
          url:'/pages/index/index',
          title:'首页',
          activeImg:'../../static/icon/shouye.png',
          img:'../../static/icon/shouye_no.png'
        },
        {
          id:2,
          url:'/pages/purchase/index',
          title:'购买',
          activeImg:'../../static/icon/goumaijilu.png',
          img:'../../static/icon/goumaijilu_no.png'
        },
        {
          id:3,
          url:'/pages/shoppingCart/shoppingCart',
          title:'购物车',
          activeImg:'../../static/icon/gouwuche.png',
          img:'../../static/icon/gouwuche_no.png'
        },
        {
          id:4,
          url:'/pages/member/member',
          title:'我的',
          activeImg:'../../static/icon/wode.png',
          img:'../../static/icon/wode_no.png'
        }
      ]
    }
  },
  computed: {
    styles() {
      return {
        ...this.config
      }
    }
  },
  methods:{
    changeUrl(item) {
	  let obj = this.data[item - 1]
      uni.redirectTo({
        url: obj.url,
        fail: function () {
          uni.showToast({
            title: '功能建设中,敬请期待！',
            icon: 'none'
          })
        }
      })
    },
    renderBar() {
      const route = this.getRoute()
      const nav = this.data.filter((item) => item.url === route)[0]
      if (nav) {
        this.isShow = true
        this.value1 = nav.id
      }
    },
    getRoute() {
      const pages = getCurrentPages()
      const page = pages[pages.length - 1]
      return '/' + page.route
    }
  },
  mounted() {
    this.renderBar()
  }

}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon {
  height: 46rpx;
  width: 46rpx;
  // margin-bottom: 12rpx;
  margin-bottom: 7rpx;
  margin-top: 12rpx;
}
.placeholder {
  width: 100%;
  height: 200rpx;
  background-color: red;
}
::v-deep .u-tabbar__content__item-wrapper {
  align-items: flex-end;
}

</style>
